<template>
  <view class="personal flex-column">
    <!-- #ifndef MP-TOUTIAO -->
    <uni-nav-bar style="z-index:999;" left-icon="left" @clickLeft="goBack" :title="username" :fixed="true"
      :statusBar='!isWin'></uni-nav-bar>
    <!-- #endif -->
    <view class="person-info">
      <view class="user-avatar flex colum-gap-30" style="padding-left: 30rpx">
        <u-avatar :src="transPic(userr.avatar)" size="50"></u-avatar>
        <view class="user-info flex flex1">
          <view class="container-text flex1">
            <u-count-to :start-val="0" :end-val="userr.edgeCount" :duration="2000" :useEasing="false"></u-count-to>
            <text>帖子</text>
          </view>
          <view class="container-text flex1">
            <u-count-to :start-val="0" :end-val="userr.fans" :duration="2000" :useEasing="false">
            </u-count-to>
            <text>粉丝</text>
          </view>
          <view class="container-text flex1">
            <u-count-to :start-val="0" :end-val="userr.follows" :duration="2000" :useEasing="false">
            </u-count-to>
            <text>关注</text>
          </view>
        </view>
      </view>
      <view class="flex-column row-gap-10 padding-cross-10">
        <text class="font700" :user-select="true">{{ userr.username }}</text>
        <text style="font-size: 0.8rem; font-weight: 300" :user-select="true">简介:{{ userr.Signature }}</text>
      </view>
      <view class="flex colum-gap-10 padding-cross-10" style="padding-right: 20rpx">
        <u-button type="primary" size="small" :color="color" :text="followerText" @click="fllower"></u-button>
        <u-button type="primary" size="small" color="#dfdfdf" text="聊天" @click="chat"></u-button>
      </view>
    </view>
    <tab :datas="icons"></tab>
    <view class="flex1">
      <view v-if="userEdge.length !== 0" class="container-flex" style="
          justify-content: flex-start;
          column-gap: 3rpx;
          padding: 0 0;
          padding-left: 4rpx;
        ">
        <view class="container-flex-item" v-for="(item, index) in userEdge" :key="item.pk">
          <home-item :config="item" :isUser="true" :itemId="index"></home-item>
        </view>
      </view>
      <view v-else class="flex-column center h100 w100 row-gap-10">
        <text class="font700">暂无帖子或视频</text>
      </view>
    </view>
  </view>
</template>

<script>
import Config from "@/common/config.js";
import HomeItem from "@/pages/home/home-item.vue";
import {  addFollower } from "@/api/app/api"
export default {
  data() {
    return {
      icons: [
        {
          type: "icon",
          icon: Config.base_Url + "/static/images/icon/grid.png",
          size: 18,
        },
        {
          type: "icon",
          icon: Config.base_Url + "/static/images/icon/video.png",
        },
      ],
      curryTabIndex: 0,
      showSetting: false,
      userr: {},
      userEdge: [],
      isFollower: false,
    };
  },
  components: {
    HomeItem,
  },
  methods: {
    share() {
      wx.navigateTo({
        url: "/pages/upload/edge",
      });
    },
    chat() {
      console.log("chat");
      wx.showToast({
        title: "暂无开放此能力",
      });
    },
    fllower() {

      wx.cloud.callFunction({
        name: "quickstartFunctions",
        data: {
          type: "follower",
          method: "post",
          data: {
            isfollower: !this.isFollower,
            user: this.userr.username,
            follower: this.$store.getters.getUser.username,
            infos: [this.userr, this.$store.getters.getUser],
            create_at_utc: Number(String(+new Date()).slice(0, 10)),
          },
        },
        success: (res) => {
          let infos = this.userr;
          !this.isFollower ? infos.fans++ : infos.fans--;
          this.isFollower = !this.isFollower;
          wx.cloud.callFunction({
            name: "quickstartFunctions",
            data: {
              type: "updateUserInfo",
              userInfo: infos,
            },
            success: (res) => {
              console.log(res);
            },
            fail: (err) => {
              console.log(err);
              wx.showToast({
                title: "关注失败",
                icon: "error",
                duration: 1000,
              });
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    goBack() {
      wx.navigateBack();
    },
    tabClick(index) {
      this.curryTabIndex = index;
    },
    phoneNumber(res) {
      console.log(res);
      wx.authorize({
        scope: "",
      });
    },
    navigationDetail() {
      uni.navigateTo({
        url: "pages/detail/detail",
      });
    },
    transPic(val) {
      if (typeof val === "string" && val.includes("cloud://")) {
        return val;
      }
      if (val === undefined) {
        val = "HeadPortrait.jpg";
      }
      return Config.cloud_url + val;
    },
  },
  computed: {
    color() {
      return this.isFollower ? "#dfdfdf" : "#3c9cff";
    },
    followerText() {
      return this.isFollower ? "关注中" : "关注";
    },
  },
  onLoad(params) {
    let channel = this.getOpenerEventChannel();
    channel.on("acceptData", (res) => {
      this.userr = Object.assign({}, this.userr, res.data);
      // wx.cloud.callFunction({
      //   name: "quickstartFunctions",
      //   data: {
      //     type: "getUserEdge",
      //     start: 0,
      //     openid: res.data.openid,
      //     isVideo: false,
      //   },
      //   success: (res) => {
      //     console.log("res", res);
      //     this.userEdge.push(...res.result.data);
      //   },
      //   fail: (err) => {
      //     console.log(err);
      //   },
      // });
    });
    wx.cloud.callFunction({
      name: "quickstartFunctions",
      data: {
        type: "follower",
        method: "get",
        data: {
          user: this.userr.username,
          follower: this.$store.getters.getUser.username,
        },
      },
      success: (res) => {
        console.log(res);
        this.isFollower = res.result.data.isFollower;
      },
      fail: (err) => {
        console.log(err);
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.personal {
  width: 100%;
  height: 100%;
}

.user-avatar {
  align-items: center;
  row-gap: 8rpx;
  margin-top: 20rpx;
}

.user-info {
  display: flex;
  justify-content: space-around;
  margin: 20rpx 0;
}
</style>
